<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    color: 'red',
    title: {
	    text: 'dd',
	    left: 'center',
        textStyle: {
            fontSize: 16,
            color: '#333B48',
            fontFamily: '微软雅黑',
            fontWeight: 'normal'
        }
	},
    legend: {
        textStyle:{
            fontSize: 12,
            color: '#5E6E87',
            fontFamily: '微软雅黑',
            fontWeight: 'normal'
          },
          data: 'dataArr',
          z: 3,
          top:'30'
    },
    // tooltip: {
    //     trigger: 'axis',
    //     formatter: function(params){
    //         // console.log(params[0])
    //         return params[0].name +" : "+ parseInt((params[0].value)*100) +"%";
    //     },
    //     axisPointer : {
    //         type : 'line'
    //     }
    // },
    // tooltip: {
    //     trigger: 'axis',
    //     // formatter: function(params){
    //     //     // console.log(params[0])
    //     //     return params[0].name +": "+ parseInt((params[0].value)*100) +"%"
    //     // },
    //     axisPointer: {
    //         type: 'line',
    //         crossStyle: {
    //             color: 'red'
    //         },
            
    //     }
    // },
     tooltip : { 
        trigger: 'axis',
        // formatter: "{b}: {c}%",
        formatter: function(params){
            return params[0].name +"<br/> 400成功接起率: "+ parseInt((params[0].value)*100) +"%"
        },
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
        }
      },
    grid: {
        top: 85,
        right: 10,
        bottom: 30,
        left: 20,
        containLabel: true
    },
    xAxis: {
      type : 'category',
      data : [1,2,'2018年3月',4,5,6,7],
      axisLabel: {
        fontSize: 10,
        color: 'red',
        interval: 0,
        rotate: 0,
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {//轴线样式
        show: true,
        lineStyle: {
            color: 'red'
        }
      }
    },
    yAxis: {
        type: 'value'
    },
    series: [{
      name: '',
      data: [0.33,0.35,0.4567,0.658,0.567,0.473,0.45784],
      type: 'line',
      cursor: 'auto',
      smooth: true,
      symbolSize: 3.5,
      label: {
        normal: {
          formatter: function(params){
            return parseInt((params.value)*100)+'%';
          },
          position: ['-10','-35'],
          show: true,
          color: '#333'
        }
      }
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>